<template>
    <app-layout>
        <section class="content-header">
            <h1>
                App 设置
                <small></small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">大转盘</a></li>
                <li class="active">添加活动</li>
            </ol>
        </section>

    <section class="content">
        <!-- Default box -->
        <div class="box box-primary">

            <div class="box-header with-border">
                <h3 class="box-title">添加活动</h3>
            </div>

            <div class="box-body">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>

                    <el-form-item label="积分消耗">
                        <el-input v-model="form.credits_cost"></el-input>
                    </el-form-item>

                    <el-form-item label="次数限制">
                        <el-input v-model="form.times_limit"></el-input>
                    </el-form-item>

                    <el-form-item label="中奖基数">
                        <el-input v-model="form.cardinal_number"></el-input>
                    </el-form-item>                    

                    <el-form-item label="活动时间">
                        <el-date-picker
                            v-model="time_range"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>                                      

                    <el-form-item label="赞助商名称">
                        <el-input v-model="form.sponsor_name"></el-input>
                    </el-form-item>

                    <el-form-item label="赞助商 Url">
                        <el-input v-model="form.sponsor_url"></el-input>
                    </el-form-item>                    

                    <el-form-item label="赞助商 LOGO">
                        <el-upload
                        name="picture"
                        class="avatar-uploader"
                        :action="API.UPLOADS"
                        :show-file-list="false"
                        :on-success="handleSponsorLogoSuccess"
                        :headers="headers">
                        <img v-if="form.sponsor_logo" :src="form.sponsor_logo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>                    

                    <el-form-item label="活动规则">
                        <u-editor :config="config" ref="ue"></u-editor>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        <el-button @click="$router.go(-1)">取消</el-button>
                    </el-form-item>                    
                    
                </el-form>
            </div>
        </div>
        <!-- /.box -->
    </section>        

    </app-layout>
</template>

<script>
import * as API from "../../Consts/Api";
import * as APP from "@/constants/app";
import Layout from "@/components/Layout";
import UEditor from "@/components/UEditor";

export default {
    components: {
        "app-layout": Layout,
        UEditor
    },

    computed: {    
        rules: function () {
            // `this` 指向 vm 实例
            let content = this.$refs.ue.getContent();
            return content;
        }
    },

    data() {
      return {
        API,
        headers: {
            Token: this.$storage.get("user").token,
            Version: APP.VERSION
        },        
        time_range: [],
        form: {
            name: '',
            credits_cost: '',
            name: '',          
            cardinal_number: '',
            sponsor_name: '',
            sponsor_url: '',
            sponsor_logo: '',
            rules: ''
        },
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 300            
        }   
      }
    },
    methods: {
        onSubmit() {
            this.form.start = this.time_range[0];
            this.form.end = this.time_range[1];
            this.form.rules = this.rules;

            this.$http.post(API.ACTIVITIES, this.form).then(response => {
                if (response.data.status == "no") {

                    this.$message({
                        message: response.data.errors ? this.renderErrors(response.data.errors) : response.data.message,
                        type: "error",
                        duration: 5000,
                        dangerouslyUseHTMLString: true
                    });
                } else {
                    this.$message({
                        message: '创建成功',
                        type: "success",
                        duration: 5000
                    });
                    
                    this.$router.go(-1);
                }
            });
        },

        handleSponsorLogoSuccess(res, file) {        
            this.form.sponsor_logo = res.data.url;
        },

        renderErrors(errors) {
            let html = '<dl><dt>验证失败</dt>';
            for (let x in errors) {
                html += '<dt>' + errors[x] + '</dt>';
            }

            html += '</dl>';

            return html;
        }
    },


};
</script>